<template>
  <div>
    <a-card>
      <a-row style="margin-bottom: 10px">
        <a-col :span="24"  style="display: flex;flex-direction: row-reverse">
          <a-button v-print="'#printReport'" type="primary">打印报表</a-button>
        </a-col>
      </a-row>
      <div id="printReport">
        <table border="1" cellPadding="5" cellSpacing="0" bordercolor="#000" style="width: 100%">
          <tr>
            <th colspan="3">
              <div style="position: relative;text-align: center">
                <img src="@/assets/reportIcon.png" width="100px" height="30px" style="position: absolute;left: 0px;top:-5px"/>
                <span>DIP首件确认表</span>
              </div>
            </th>
          </tr>
          <tr>
            <td colspan="3">
              <a-row>
                <a-col :span="12"><span>机型：{{reportData.machineType}}</span></a-col>
                <a-col :span="12"><span>线别：{{reportData.lineType}}</span></a-col>
                <a-col :span="12"> <span>站别：{{reportData.standBy}}</span></a-col>
                <a-col :span="12"><span>日期：{{reportData.inTime}}</span></a-col>
              </a-row>
            </td>
          </tr>
          <tr>
            <td style="width: 32%">
              <span>首检确认项目</span>
            </td>
            <td>QC检察员确认</td>
            <td>作业员签名</td>
          </tr>
          <tr>
            <td>
              <div style="display: flex;align-items: center;pointer-events: none;">
                <span style="margin-right: 15px">环保：Y/N [ {{reportData.protection}} ]</span>
                <a-radio-group v-model="reportData.craftAsk" :options="checkedList"/>
              </div>
            </td>
            <td></td>
            <td></td>
          </tr>
          <tr v-for="item in reportData.firstPieceDipLogList">
            <td>{{ item.firstContent }}</td>
            <td v-if="item.contentType === '6'">{{'温度:要求' + item.query2 + ',实测:' + item.query3 + ',漏电值:' + item.query4 + ',是否合格:' + item.query1}}</td>
            <td v-else-if="item.contentType === '8'">{{'力矩:要求' + item.query2 + ',实测:' + item.query3 + ',是否合格:' + item.query1}}</td>
            <td v-else>{{item.query1}}</td>
            <td></td>
          </tr>
          <tr>
            <td colspan="3">异常现场及处理记载:</td>
          </tr>
          <tr>
            <td colspan="3">
              <span>组长确认签名：</span>
              <span style="margin-left: 60px">工程确认签名：</span>
              <span style="margin-left: 60px">QC检察员签名：</span>
            </td>
          </tr>
          <tr>
            <th colspan="3">说明：<br>
              <span>1、作业员签名:表示已阅读并理解作业指导书,并按作业指导书要求作业</span><br>
              <span>2、组长、QC检查员及技术员应检查确认以下内容并将结果填入上面相应空格内:</span><br>
              <span>  a、员工作业内容与作业指导书是否一致。</span><br>
              <span>  b、是否符合客户特殊工艺要求,完成品状态是否良好。</span><br>
              <span>  c、确认有无变更资料，如有则填写变更号及变更执行情况，如无则记为“N"，特殊工艺需要录入具体类容，其余工序如确认OK记为”OK”，NG则记为“NG”,不涉及记为“#”</span><br>
              <span>  d、新增特殊工序，由组长在上表空格列添加</span>
            </th>
          </tr>
        </table>
        <div style="height: 30px;line-height: 30px;">质检照片：</div>
        <div style="display: flex;flex-wrap: wrap">
          <div v-for="item in reportData.query1.split(',')" style="width: 50%;padding: 5px 5px">
            <img :src="item" width="100%" height="200px"/>
          </div>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script>
export default {
  /** YZY_DIP波峰焊接首件确认检查表 **/
  name: 'DIPFirstInspectionConfirm',
  props:{
    reportData:{
      type:Object,
      default:()=>{}
    },
  },
  data(){
    return {
      checkedList:[
        { label: '有铅', value: '有铅' },
        { label: '无铅', value: '无铅' },
        { label: '红胶', value: '红胶' },
      ]
    }
  }
}
</script>

<style scoped>

</style>